<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <style>
        
            html{
                height:100%
            }

            body{
                height:100%;
                margin:0px;
            }

            /* 定义了一个样式类 */
            .container{
                width:100%;
                height:100%;
                background-color:#EEEEEE;

                overflow:auto;/*溢出后，如何处理*/

                display: flex;/*启用flex布局*/
                flex-direction: column;/*flex布局 纵向排列*/
                align-items: center;/*水平居中*/
               


            }

            .card{
                width:95%;
                height:300px;
                background-color: brown;
                margin-top:20px;
                flex:0 0 auto;/*禁止自动缩放*/
            }
        
        </style>
    </head>

    <body >
        <!-- 矩形区域 -->
        <div class="container">

            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            

        </div>

    </body>


</html>